<template>
	<view class="bg-ambassadors-fans" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-ambassadors-fans" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">粉丝</block>
		</cu-custom>
		<view class="item-one">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/promote-bg-1.png?x-oss-process=image/resize,m_fill,h_282,w_246"
			 mode=""></image>
			<view class="info" v-if="threeData[0]">
				<view class="info-cont">
					<view class="user-one">
						<text class="num">1</text>
						<image class="head" :src="threeData[0].headimg+'?x-oss-process=image/resize,m_fill,h_126,w_126'" mode=""></image>
						<text class="text-cut give" v-if="threeData[0].generalize_money>0">贡献值：{{threeData[0].generalize_money}}元</text>
						<image class="huanguan" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/promote-crown.png?x-oss-process=image/resize,m_fill,h_40,w_48"
						 mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="item-two">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/promote-bg-2.png?x-oss-process=image/resize,m_fill,h_230,w_200"
			 mode=""></image>
			<view class="info" v-if="threeData[1]">
				<view class="info-cont">
					<view class="user-two">
						<text class="num">2</text>
						<image class="head" :src="threeData[1].headimg+'?x-oss-process=image/resize,m_fill,h_106,w_106'" mode=""></image>
						<text class="text-cut give" v-if="threeData[1].generalize_money>0">贡献值：{{threeData[1].generalize_money}}元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="item-three">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/promote-bg-3.png?x-oss-process=image/resize,m_fill,h_230,w_200"
			 mode=""></image>
			<view class="info" v-if="threeData[2]">
				<view class="info-cont">
					<view class="user-three">
						<text class="num">3</text>
						<image class="head" :src="threeData[2].headimg+'?x-oss-process=image/resize,m_fill,h_106,w_106'"></image>
						<text class="text-cut give" v-if="threeData[2].generalize_money>0">贡献值：{{threeData[2].generalize_money}}元</text>
					</view>
				</view>
			</view>
		</view>

		<view class="th">
			<view class="th-cont">
				<view class=""></view>
				<view class="">昵称</view>
				<view class="">加入日期</view>
				<view class="">贡献值</view>

				<view class="fans-list">
					<view class="td" v-for="(item,index) in allBottomList" :key="index">
						<view class="">
							<image :src="item.headimg+'?x-oss-process=image/resize,m_fill,h_56,w_56'" mode=""></image>
						</view>
						<view class="text-cut">
							{{item.user_name}}
						</view>
						<view class="text-cut">
							{{item.generalize_time}}
						</view>
						<view class="text-cut">
							{{item.generalize_money}}元
						</view>
					</view>
					<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了</tui-divider>
					<no-content :showType="'search'" v-if='noContentShow' :tips="'暂无粉丝哦~'"></no-content>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiDivider from "./component/divider.vue"
	import noContent from "./component/noContent.vue"
	export default {
		components: {
			tuiDivider,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				page: 1,
				lastPage: '',
				noContentShow: false,
				noMore: false,
				allBottomList: [],
				threeData: []
			}
		},
		onLoad() {
			this.getAll()
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				this.noMore = true
				return
			}
			this.getAll()
		},
		methods: {
			getAll() {
				var me = this;
				this.$request({
					url: '/GeneralizeLog/get_fans',
					methods: 'GET',
					data: {
						page: me.page
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							if (res.data.data.totalNum == 0) {
								me.noContentShow = true
								return
							}
							if (list.length > 0) {
								if (me.page == 1) {
									if (list.length > 3) {
										me.threeData = list.slice(0, 3)
									} else {
										me.threeData = list.slice(0, list.length)
									}
								}
								me.allBottomList = me.allBottomList.concat(list)
								me.page++
								me.lastPage = res.data.data.pageCount
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	page {
		background-image: linear-gradient(-90deg,
			#ff5a29 0%,
			#fe8f65 48%,
			#ff5628 100%);
	}
</style>
<style scoped>
	.container-fans {
		padding-bootm: 30rpx;
	}

	.item-one {
		width: 246rpx;
		position: absolute;
		top: 298rpx;
		left: 50%;
		transform: translateX(-123rpx);
	}

	.item-one .info {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.item-one image {
		width: 246rpx;
		height: 282rpx;
	}

	.item-two {
		width: 200rpx;
		position: absolute;
		top: 350rpx;
		left: 88rpx;
	}

	.item-two .info {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.item-two image {
		width: 246rpx;
		height: 230rpx;
	}

	.item-three {
		width: 200rpx;
		position: absolute;
		top: 380rpx;
		right: 88rpx;
	}

	.item-three .info {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.item-three image {
		width: 246rpx;
		height: 230rpx;
	}

	.info-cont {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.user-one {
		position: absolute;
		top: -70rpx;
		left: 50%;
		margin-left: -70rpx;
		width: 140rpx;
		height: 140rpx;
		box-shadow: 4rpx 7rpx 15rpx 1rpx rgba(137, 27, 11, 0.4);
		background-color: #ffd248;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}


	.user-one .head {
		width: 126rpx;
		height: 126rpx;
		border-radius: 100%;
	}

	.user-one .num {
		display: block;
		position: absolute;
		top: 120rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #ffd555;
		box-shadow: 4rpx 7rpx 15rpx 1rpx rgba(137, 27, 11, 0.4);
		font-size: 24rpx;
		color: #ffffff;
		text-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.3);
		z-index: 9;
		border-radius: 100%;
	}

	.user-one .give {
		display: block;
		position: absolute;
		top: 160rpx;
		font-size: 24rpx;
		color: #ffffff;
		max-width: 246rpx;
	}

	.user-one .huanguan {
		position: absolute;
		top: -35rpx;
		left: 50%;
		margin-left: -24rpx;
		z-index: 9;
		width: 48rpx;
		height: 40rpx;
	}

	.user-two {
		position: absolute;
		top: -70rpx;
		left: 50%;
		margin-left: -60rpx;
		width: 120rpx;
		height: 120rpx;
		box-shadow: 4rpx 7rpx 15rpx 1rpx rgba(137, 27, 11, 0.4);
		background-color: #dcdcdc;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}


	.user-two .head {
		width: 106rpx;
		height: 106rpx;
		border-radius: 100%;
	}

	.user-two .num {
		display: block;
		position: absolute;
		top: 95rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #e6e7ec;
		box-shadow: 4rpx 7rpx 15rpx 1rpx rgba(137, 27, 11, 0.4);
		font-size: 24rpx;
		color: #333;
		text-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.3);
		z-index: 9;
		border-radius: 100%;
	}

	.user-two .give {
		display: block;
		position: absolute;
		top: 145rpx;
		font-size: 24rpx;
		color: #ffffff;
		max-width: 246rpx;
	}

	.user-three {
		position: absolute;
		top: -50rpx;
		left: 50%;
		margin-left: -50rpx;
		width: 100rpx;
		height: 100rpx;
		box-shadow: 4rpx 7rpx 15rpx 1rpx rgba(137, 27, 11, 0.4);
		background-color: #d3944b;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}

	.user-three .head {
		width: 86rpx;
		height: 86rpx;
		border-radius: 100%;
	}

	.user-three .num {
		display: block;
		position: absolute;
		top: 75rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #f1a956;
		box-shadow: 4rpx 7rpx 15rpx 1rpx rgba(137, 27, 11, 0.4);
		font-size: 24rpx;
		color: #ffffff;
		text-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.3);
		z-index: 9;
		border-radius: 100%;
	}

	.user-three .give {
		display: block;
		position: absolute;
		top: 120rpx;
		font-size: 24rpx;
		color: #ffffff;
		max-width: 246rpx;
	}

	.bg-ambassadors-fans {
		background-image: linear-gradient(-90deg,
			#ff5a29 0%,
			#fe8f65 48%,
			#ff5628 100%);
		position: relative;
		padding-bottom: 30rpx;
	}

	.fans-list {
		width: 100% !important;
		background-color: #ffffff;
		border-radius: 0 0 10rpx 10rpx;
		min-height: 500rpx;
		position: absolute;
		top: 80rpx;
		left: 0;
	}

	.th {
		width: 690rpx;
		height: 90rpx;
		position: absolute;
		top: 524rpx;
		left: 50%;
		transform: translateX(-344rpx);
		border-radius: 10rpx 10rpx 0 0;
		background: #fff;
	}

	.th .th-cont {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 10rpx 10rpx 0 0;
		display: flex;
		align-items: center;
	}

	.th .th-cont>view {
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #ba6f0c;
		font-weight: bold;
	}

	.th .th-cont>view:nth-child(1) {
		width: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.th .th-cont>view:nth-child(2) {
		flex: 1;
	}

	.th .th-cont>view:nth-child(3) {
		flex: 1;
	}

	.th .th-cont>view:nth-child(4) {
		flex: 1;
	}

	.fans-list .td {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
	}

	.fans-list .td>view {
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #ba6f0c;
		line-height: 36rpx;
	}

	.fans-list .td>view:nth-child(1) {
		width: 110rpx;
	}

	.fans-list .td>view:nth-child(1) image {
		border-radius: 100%;
		width: 56rpx;
		height: 56rpx;
	}

	.fans-list .td>view:nth-child(2) {
		flex: 1;
	}

	.fans-list .td>view:nth-child(3) {
		flex: 1;
	}

	.fans-list .td>view:nth-child(4) {
		flex: 1;
	}
</style>
